<template>
	<div id="addAddress">
		<!--<haders title="收货地址"></haders>-->

		<scroller ref="scroller" :on-infinite="infinite">
			<div class="mian">
				<ul class="addres">
					<li class="pd15" v-for="(item,index) in items">
						<a class="disbolc" @click="getaddress(item)">
						<p><span>{{item.Name}}</span>
							<font>{{item.Tel}}</font>
						</p>
						<p>
							<font>地址:</font><span>{{item.ShowAddress}}</span>
						</p>
						</a>
						<p class="threeP">
							<label @click="radioset(item,index)">
								<i class="iconfont" :class="item.DefultAdress==num? 'icon-xuanzhong1':'icon-danxuankuangxuanzhong'"></i>
								<a v-if="item.DefultAdress==num">默认地址</a>
								<a v-else>设置为默认地址</a>
							</label>
							<a>
								<span @click="getAdders(item)"><i class="iconfont icon-pingjia1"></i>编辑</span>
								<span @click="clickdelete(item,index)"><i class="iconfont icon-shanchu"></i>删除</span>
							</a>
						</p>
					</li>
				</ul>
				<!--没有数据时-->
				<no-data v-if="isShow" title="还没有设置收货地址~~~"></no-data>
			</div>

		</scroller>
		<footer>
			<a class="butOK" @click="butOk">新 增</a>
		</footer>

	</div>

</template>

<script>
	import Qs from 'qs';
	import { Indicator } from 'mint-ui';
	import { Toast } from 'mint-ui';
	export default {
		name: 'addAddress',
		components: {},
		data() {
			return {
				isShow: false,
				indexPage: 1, //请求页面索引
				items: [],
				num:1

			}
		},
		mounted() {

		},
		methods: {

			butOk: function() {
				let _this = this;
				_this.$router.push({
					path: '/clientele/saveAddres'
				});
			},
			//获取ID
			getAdders(item){
				this.$router.push({path:'/clientele/saveAddres/'+item.ID})  
			},
			//分页请求
			infinite(done) {
				Indicator.open("加载中...");
				let _this = this;
				_this.$http.get("/GroupBuy/GetMyAddress", {
					params: {
						"page": this.indexPage
					}
				}).then((res) => {
					console.log(res);
					if(res.data.data.List == "") {
						done(true);
					} else {
						if(_this.indexPage <= res.data.data.TotalPage) {
							_this.indexPage++;
							_this.items = _this.items.concat(res.data.data.List);
							console.log(_this.items);
							setTimeout(function() {
								done()
							}, 3000)
						} else {
							done(true)
						}
					}
					Indicator.close();
				}).catch((err) => {
					console.log(err)
				});
			},
			radioset: function(item, index) {
				this.$http.post('/GroupBuy/SetDefultAddress', Qs.stringify({
					"id": item.ID
				})).then((res) => {
					if(res.data.code == 1) {
						this.items.forEach(function(data){
							data.DefultAdress=0;
							item.DefultAdress=1;
						});
						Toast({
							message: '设置成功',
							iconClass: 'iconfont icon-zhengque'
						});
						console.log(this.items);
						
					} else {
						Toast(res.data.msg);
					}
				}).catch((err) => {
					console.log(err);
				});
			},
			clickdelete: function(item, index) {
				this.$http.post('/GroupBuy/DeleteMyAddress', Qs.stringify({
					"id": item.ID
				})).then((res) => {
					if(res.data.code == 1) {
						this.items.splice(index, 1);
						Toast({
							message: '删除成功',
							iconClass: 'iconfont icon-zhengque'
						});
					}
					console.log(res);
				}).catch((err) => {
					console.log(err);
				});
			},
			getaddress(item){ 
				let path=this.$store.state.goodsPath;
				this.$router.push({path:path})
				this.$store.state.Contact=item.ID
			
			}
		}
	}
</script>

<style scoped>
	.icon-danxuankuangxuanzhong{
		color: #CCCCCC;
	}
	.addres {
		width: 100%;
		padding: 0 0.3rem;
	}
	
	.addres li {
		width: 100%;
		background-color: #666666; 
		margin-bottom:0.3rem;
		padding: 0.3rem;
		border-radius: 0.066666rem;
		color: #333;
		font-size: 0.373333rem;
		background:#fff;
	}
	
	.addres li p {
		width: 100%;
		color: #666;
		padding: 0.1rem 0;
	}
	
	.addres li p:nth-child(1) {
		display: flex;
		justify-content: space-between;
	}
	
	.addres li p.threeP {
		display: flex;
		justify-content: space-between;
		margin-top: 0.1rem;
		padding-top: 0.25rem;
		border-top:1px solid #E2E2E2;
	}
	
	.addres li p a {
		color: #666;
	}
	
	.addres li p.threeP a:nth-child(2) span {
		margin-left: 0.3rem;
		font-size:0.4rem;
	}
	.addres li p.threeP a:nth-child(2) span i{
		font-size: 0.44rem;
	}
	.addres li p label i {
		font-size: 0.453333rem;
		margin-right: 0.1rem;
		float: left;
		transition: all 0.3s ease-in-out;
	}
	
	footer {
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 0;
		z-index: 10000;
		height: 1.3rem;
		line-height: 1.4rem;
	}
	
	footer a {
		display: block;
		width: 100%;
		text-align: center;
		font-size: 0.453333rem;
		color: #fff;
		font-weight: 500;
		border-top-left-radius: 0.066666rem;
		border-top-right-radius: 0.066666rem;
		background-color: #6530E0;
	}
	
	.icon-xuanzhong1 {
		transform: scale(1.1);
		color: #6530E0;
	}
	.disbolc{
		display: block;
	}
</style>